<template>
<div class="abnnormal-order">
   <main-content title="服务单详情" back>
    <section
        v-if="orderData.exception?.status !== 'reject'"
        class="steps-line"
      >
      <simple-steps
        :active-index="activeStepIndex"
        :steps="steps"
      />
    </section>

    <section class="status-line">
      <div class="left">
        <div class="status">
          <div class="status-main">
            <div class="icon">
              <el-icon><Warning /></el-icon>
            </div>
            当前订单状态：
            <span style="font-size: 22px; font-weight: bold">{{ currentOrderStatus?.title }}</span>
          </div>
          <div
            v-if="orderData.errMsg"
            class="status-sub"
          >
            {{ orderData.errMsg }}
          </div>
        </div>
      </div>
      <div class="right" />
    </section>

    <section class="table-section">
      <div class="table-title">
        <div class="decorator"></div>
        退货商品
      </div>
      <div class="table-wrapper">
        <el-table :data="goodsTableData" style="width: 100%">
          <el-table-column prop="thumbnailUrl" label="商品图片" width="180" >
            <template #default="scope">
              <div>
                <el-avatar style="margin-top: 8px;" shape="square" :size="80" fit="fill" :src="scope.row.thumbnailUrl" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品名称" />
          <el-table-column prop="productName" label="规格名称"/>
          <el-table-column prop="payOfMoney" label="价格" >
            <template #default="scope">
                <!-- <div>
                  <span v-show="scope.row.payOfCurrencyCount">{{ `${scope.row.payOfCurrencyCount}（积分），` }}</span>
                  {{ setMoneyConfig(scope.row.payOfMoney) }}
                </div> -->
                {{ getPointsAndMoneyString(scope.row) }}
              </template>
          </el-table-column>
          <el-table-column prop="goodsNum" label="数量" />
          <el-table-column label="合计">
            <template #default="props">
                <!-- {{ props.row.payOfCurrencyCount }}积分
                +
                {{ isNaN(props.row.payOfMoney) ? props.row.payOfMoney : props.row.payOfMoney / 100 }}元 -->
                {{ getPointsAndMoneyString(props.row) }}
              </template>
          </el-table-column>
        </el-table>
        <div class="summary">
            合计: 
            <span class="highlight">
              <!-- <span v-show="orderData.payOfCurrencyCount">
                {{ `${orderData.payOfCurrencyCount}（积分），` }}
              </span>
              {{ setMoneyConfig(orderData.payOfMoney) }} -->
              {{ getPointsAndMoneyString(orderData) }}
            </span>
          </div>
      </div>
    </section>

    <section class="table-section">
      <div class="table-title">
        <div class="decorator" />
        基础信息
      </div>

      <div class="table-wrapper">
        <el-table :data="basicInfoTableData">
          <el-table-column
            prop="id"
            label="售后单号"
            width="80"
          />
          <el-table-column
            prop="orderId"
            label="订单号"
          >
            <tempalte>
              {{ orderData.orderNo }}
            </tempalte>
          </el-table-column>
          <el-table-column
            prop="unionId"
            label="客户ID"
          >
            {{ orderData?.user?.unionId }}
          </el-table-column>
          <el-table-column
            prop="userPhone"
            label="联系手机号"
          />
          <el-table-column
            prop="userName"
            label="联系人"
          />
        </el-table>
      </div>
    </section>

    <section class="table-section">
      <div class="table-title">
        <div class="decorator" />
        退货申请信息
      </div>
      <div class="table-wrapper">
        <!-- <service-line label="服务单号">{{orderData.orderNo}}</service-line>
        <service-line label="申请状态">{{getAbnormalOrderStatus(orderData.exception?.status)}}</service-line>
        <service-line label="订单编号">
          <div class="line-content">
            {{ orderData.orderNo }} <el-button @click="goOrderDetail(orderData.exception?.orderId)" type="primary" link>查看</el-button>
          </div>
        </service-line>
        <service-line label="申请时间">
          {{ formatTime(orderData.createTime) }}
        </service-line>
        <service-line label="用户账号">
          {{orderData.exception?.userAccount}}
        </service-line>
        <service-line label="联系人">
          {{orderData.exception?.userName}}
        </service-line>
        <service-line label="联系电话">
          {{orderData.exception?.userPhone}}
        </service-line> -->
        <service-line label="退货原因">{{orderData.exception?.userReason}}</service-line>
        <service-line label="问题描述">{{orderData.exception?.userDescription}}</service-line>
        <service-line label="申请退款金额">
          {{ getPointsAndMoneyString(orderData) }}
        </service-line>
        <service-line label="凭证照片" class="service-line">

          <div class="displf" v-for="(item,index) in orderData.exception?.userImages.split(',')" :key="index">
            <template v-if="item.substr(item.length-4) == '.mp4'">
              <video controls :autoplay="false"  :src="item" style="width: 200px;height=200px"></video>
            </template>

            <el-image v-else style="width: 200px; height: 200px" :src="item" fit="contain" />
          </div>
        </service-line>
      </div>
    </section>

    <section
        v-if="orderData.exception?.status !== 'submit'"
        class="table-section"
      >
      <div class="table-wrapper">
        <service-line label="处理人员">
          {{ orderData.exception?.storeName }}
        </service-line>

        <service-line label="处理时间">
          {{ formatTime(orderData.exception?.storeProcessTime) }}
        </service-line>

        <service-line label="处理备注">
          {{ orderData.exception?.storeDescription }}
        </service-line>
      </div>
    </section>

    <section class="table-section"  v-if="orderData.exception?.status !== 'submit'">
      <div class="table-wrapper">
        <service-line label="处理人员">
          {{orderData.exception?.storeName}}
        </service-line>

        <service-line label="处理时间">
          {{formatTime(orderData.exception?.storeProcessTime)}}
        </service-line>

        <service-line label="处理备注">
          {{orderData.exception?.storeDescription}}
        </service-line>
      </div>
    </section>

    <section class="table-section" v-if="orderData.exception?.status == 'finish' || orderData.exception?.status == 'wait_store_receive'">
      <div class="table-wrapper">
        <service-line label="退回快递公司">
          {{orderData.exception?.userLogisticsCompany}}
        </service-line>

        <service-line label="退回快递单号">
          {{orderData.exception?.userLogisticsNum}}
        </service-line>
      </div>
    </section>
  </main-content>
</div>

</template>

<script setup lang="ts">
import { Ref } from "vue";
import moment from "moment";
import { Warning } from "@element-plus/icons-vue";
import { getAbnormalDetail } from "@/api/pointsMall";
import { AfterSalesServiceOrderStatus } from "@/config/dictionary";
import ServiceLine from "./components/ServiceLine.vue";
import { getPointsAndMoneyString } from "@/utils/index";

const Router = useRouter(),
Route = useRoute();
const orderData = ref({} as any)

const goodsTableData = computed(() => {
  return [orderData.value]
})

const basicInfoTableData = computed(() => {
  return [ orderData.value?.exception ?? {} ]
})

const formatTime = (val: string) => {
  if(val) {
    return moment(val).format("YYYY.MM.DD HH:mm:ss")
  }
  return '--'
}

// 订单详情
const getAbnormalDetailData = async()=> {

  let params = {
    id: <string>Route.query.id,
  }
  let rs:any = await getAbnormalDetail(params)
  if(rs.code === 200) {
    orderData.value = rs.payload
  }
  getSteps()
}

const steps:Ref<{title: string, status: string[]}[]> = ref([])
const activeStepIndex:Ref<number> = ref(-1)
const getSteps = () => {
  const _steps = []

  _steps.push({
    title: '提交申请',
    status: [],
  })

  _steps.push({
    title: '商家审核',
    status: [ 'submit' ]
  })

  if (orderData.value?.exception?.status === 'wait_shangmen') {
    _steps.push({
      title: '上门取件',
      status: [ 'wait_shangmen' ]
    })
  } else {
    _steps.push({
      title: '买家寄回',
      status: [ 'wait_user_ship' ]
    })
  }

  _steps.push({
    title: '商家确认收货',
    status: [ 'wait_store_receive' ]
  })

  _steps.push({
    title: '退款完成',
    status: [ 'finish' ]
  })

  steps.value = [ ..._steps ]
  activeStepIndex.value = _steps.findIndex(item => item.status.includes(orderData.value?.exception?.status))
}

const currentOrderStatus = computed(() => {
  const statusList = [ ...steps.value ]
  statusList.push({
    title: '商家拒绝',
    status: [ 'reject' ]
  })

  return statusList.find(item => item.status.includes(orderData.value?.exception?.status))
})

onBeforeMount(() => {
  getAbnormalDetailData()
})
</script>

<style scoped lang="scss">
.steps-line {
  padding: 20px;
  background: #F8F8F8;
}

.status-line {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;

  .left {
    display: flex;
    align-items: center;

    .status {
      margin-left: 10px;

      .status-main {
        font-size: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;

        .icon {
          font-size: 18px;
          display: flex;
          align-items: center;
          color: var(--el-color-primary);
          margin-right: 10px;
        }
      }

      .status-sub {
        font-size: 14px;
        line-height: 14px;
        color: #999;
        margin-top: 10px;
        margin-left: 28px;
      }
    }
  }
}

.split-line__HZ {
  height: 1px;
  background-color: var(--el-table-border-color);
  margin: 20px 0;
}

.table-section {
  margin-top: 20px;

  .table-title {
    display: flex;
    align-items: center;

    .decorator {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background: #3E61A9;
    }
  }

  .table-wrapper {
    margin-top: 10px;
  }

  .button-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}

.summary {
  // height: 0px;
  background-color: #F4F5F9;
  line-height: 50px;
  vertical-align: middle;
  text-align: right;
  padding: 5px 20px;
  color: #909399;

  .highlight {
    color: var(--el-color-danger);
    font-weight: bold;
  }
}

.line-content {
  display: flex;
  align-items: center;

  :deep(.el-button) {
    padding-top: 0;
    padding-bottom: 0;
    height: unset;
  }

  :deep(.el-input) {
    width: 400px;
    margin-right: 20px;
  }
}

.service-line{
  width: 100%;
  :deep(.line-content) {
    display: flex;
    :only-child {
      margin-right: 10px;
    }
  }
}

.abnnormal-order{
  :deep(.content .content-slot-bg){
      overflow: hidden;
  }
}


</style>
